<template>
    <div class="api-docs">
        <!-- Attr -->
        <h4 class="api-docs-title">Attr</h4>
        <ul class="attr-list">
            <li class="attr-head">
                <div v-for="attrHead in attrHeadList" class="attr-head-item">{{ attrHead }}</div>
            </li>
            <li v-for="row in attrRows" class="attr-body">
                <div v-for="(item, index) in Object.keys(row)" class="attr-body-item">{{ row[item] }}</div>
            </li>
        </ul>

        <!-- Event -->
        <h4 class="api-docs-title">Event</h4>
        <ul class="attr-list">
            <li class="attr-head">
                <div v-for="eventHead in eventHeadList" class="attr-head-item">{{ eventHead }}</div>
            </li>
            <li v-for="row in eventRows" class="attr-body">
                <div v-for="(item, index) in Object.keys(row)" class="attr-body-item">{{ row[item] }}</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { computed } from "vue";
import apiDocs from "./api-docs";
const props = defineProps({
    compName: {
        type: String,
        default: "",
    },
});

const attrHeadList = ['属性名', '类型', '默认值', '必填', '说明']
const attrRows = computed(() => apiDocs[props.compName].attr)


console.log(apiDocs);

const eventHeadList = ['事件名', '参数', '说明']
const eventRows = computed(() => apiDocs[props.compName].event)




</script>

<style lang="less" scoped>
.api-docs {
    width: 100%;

    .api-docs-title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin: 20px 0;
    }

    .attr-list {
        width: 100%;
        list-style: none;
        margin: 10px 0;
        padding: 0;
        display: flex;
        flex-direction: column;

        .attr-head {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;
            font-size: 14px;
            border-bottom: 1px solid #eee;

            &-item {
                flex: 1;
                font-weight: bold;
                text-align: left;
            }
        }

        .attr-body {
            width: 100%;
            min-height: 40px;
            display: flex;
            align-items: center;
            font-size: 14px;
            border-bottom: 1px solid #eee;

            &-item {
                flex: 1;
                text-align: left;
                font-weight: 300;
                font-size: 12px;
            }
        }
    }
}
</style>
